<template>
    <!-- 导航 -->
    <el-breadcrumb class="navigation" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>排班管理</el-breadcrumb-item>
        <el-breadcrumb-item>排班计划</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="headDivider"></div>
    <!--  搜索栏 -->
    <div>
        <el-form style="margin-top: 15px;" :inline="true" :model="queryPlan" class="demo-form-inline">
            <el-form-item label="班组类型">
                <el-select v-model="queryPlan.calendarType" placeholder="班组类型">
                    <el-option v-for="item in types" :key="item.teamTypeId" :label="item.teamTypeName"
                        :value="item.teamTypeName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="计划编号">
                <el-input v-model="queryPlan.planCode" placeholder="计划编号" clearable />
            </el-form-item>
            <el-form-item label="计划名称">
                <el-input v-model="queryPlan.planName" placeholder="计划名称" clearable />
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker v-model="queryPlan.startDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择开始日期" />
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker v-model="queryPlan.endDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择结束日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadPlans">搜索</el-button>
                <el-button @click="resetTing">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 工具栏 -->
    <div>
        <el-button title="新增计划" @click="this.addPlanDialogVisible = true" type="primary"><el-icon>
                <Plus />
            </el-icon></el-button>
        <el-button @click="deletePlanEdits" title="删除选中计划" type="danger"><el-icon>
                <Delete />
            </el-icon></el-button>
    </div>
    <!-- 数据表格 -->
    <el-table ref="planTable" :row-key="(row) => row.planId" :data="plans" style="width: 100%">
        <el-table-column :reserve-selection="true" type="selection" width="35" />
        <el-table-column label="计划编号" property="planCode" align="center" width="160">
            <template #default="scope">
                <el-link @click="linkEmits(scope.row)" :underline="false" type="primary">{{ scope.row.planCode }}</el-link>
            </template>
        </el-table-column>
        <el-table-column label="计划名称" property="planName" align="center" width="180" />
        <el-table-column label="班组类型" property="calendarType" align="center" width="125" />
        <el-table-column label="开始日期" property="startDate" align="center" width="125" />
        <el-table-column label="结束日期" property="endDate" align="center" width="125" />
        <el-table-column label="轮班方式" property="shiftType" align="center" width="125">
            <template #default="scope">
                <span v-if="scope.row.shiftType == 1">白班</span>
                <span v-else-if="scope.row.shiftType == 2">两班倒</span>
                <span v-else>三班倒</span>
            </template>
        </el-table-column>
        <el-table-column label="倒班方式" property="shiftMethod" align="center" width="125">
            <template #default="scope">
                <span v-if="scope.row.shiftMethod == 1">按天</span>
                <span v-else-if="scope.row.shiftMethod == 2">按周</span>
                <span v-else-if="scope.row.shiftMethod == 3">按月</span>
                <span v-else>按季度</span>
            </template>
        </el-table-column>
        <el-table-column label="状态" property="status" align="center" width="125">
            <template #default="scope">
                <el-tag v-if="scope.row.status == 1" class="mx-1" type="danger">未确认</el-tag>
                <el-tag v-else class="ml-2" type="success">已确认</el-tag>
            </template>
        </el-table-column>
        <el-table-column width="150" align="center" label="操作">
            <template #default="scope">
                <div v-if="scope.row.status == 1">
                    <el-button size="small" @click="handlePlanEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deletePlanEdits(scope.row)">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页栏 -->
    <el-pagination class="page" :page-size="limit" @current-change="changePage" background layout="prev, pager, next"
        :total="total" />

    <!-- 添加计划的弹窗-->
    <el-dialog v-model="addPlanDialogVisible" title="添加排班计划" :destroy-on-close=true width="900" align-center
        @close="cancelAddPlan">
        <el-form label-width="100px" :model="newPlan" style="max-width: 850px">
            <div class="addPlan">
                <span>*</span>
                <el-form-item label="计划编号" style="width: 335px; margin-right: 80px;">
                    <el-input v-model="newPlan.planCode" placeholder="请输入计划编号" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="计划名称" style="width: 420px;">
                    <el-input v-model="newPlan.planName" placeholder="请输入计划名称" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="开始日期" style="width: 270px;">
                    <el-date-picker v-model="newPlan.startDate" value-format="YYYY-MM-DD" type="date"
                        placeholder="请选择开始日期" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="结束日期" style="width: 270px;">
                    <el-date-picker v-model="newPlan.endDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择结束日期" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="班组类型" style="width: 270px;">
                    <el-select v-model="newPlan.calendarType" placeholder="班组类型">
                        <el-option v-for="item in types" :key="item.teamTypeId" :label="item.teamTypeName"
                            :value="item.teamTypeId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="轮班方式">
                    <el-radio-group v-model="newPlan.shiftType" class="ml-4">
                        <el-radio label="1">白班</el-radio>
                        <el-radio label="2">两班倒</el-radio>
                        <el-radio label="3">三班倒</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="倒班方式" style="width: 200px; margin-left: 70px;">
                    <el-select v-model="newPlan.shiftMethod" placeholder="倒班方式">
                        <el-option label="按天" value="1">按天</el-option>
                        <el-option label="按周" value="2">按周</el-option>
                        <el-option label="按月" value="3">按月</el-option>
                        <el-option label="按季度" value="4">按季度</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left: -80px;">
                    <el-input-number v-if="newPlan.shiftMethod == 1" v-model="newPlan.shiftCount" :min="1" :max="100"
                        controls-position="right" />
                </el-form-item>
            </div>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="newPlan.remark" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelAddPlan">取消</el-button>
                <el-button type="primary" @click="doAddPlan">提交</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 编辑排班计划 -->
    <el-dialog v-model="updatePlanDialogVisible" title="添加排班计划" :destroy-on-close=true width="900" align-center
        @close="cancelUpdatePlan">
        <el-form label-width="100px" :model="updatePlan" style="max-width: 850px">
            <div class="addPlan">
                <span>*</span>
                <el-form-item label="计划编号" style="width: 335px; margin-right: 80px;">
                    <el-input v-model="updatePlan.planCode" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="计划名称" style="width: 420px;">
                    <el-input v-model="updatePlan.planName" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="开始日期" style="width: 270px;">
                    <el-date-picker v-model="updatePlan.startDate" value-format="YYYY-MM-DD" type="date" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="结束日期" style="width: 270px;">
                    <el-date-picker v-model="updatePlan.endDate" value-format="YYYY-MM-DD" type="date" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="班组类型" style="width: 270px;">
                    <el-select v-model="updatePlan.calendarType">
                        <el-option v-for="item in types" :key="item.teamTypeId" :label="item.teamTypeName"
                            :value="item.teamTypeId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="轮班方式">
                    <el-radio-group v-model="updatePlan.shiftType" class="ml-4">
                        <el-radio label="1">白班</el-radio>
                        <el-radio label="2">两班倒</el-radio>
                        <el-radio label="3">三班倒</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="倒班方式" style="width: 200px; margin-left: 70px;">
                    <el-select v-model="updatePlan.shiftMethod">
                        <el-option label="按天" value="1">按天</el-option>
                        <el-option label="按周" value="2">按周</el-option>
                        <el-option label="按月" value="3">按月</el-option>
                        <el-option label="按季度" value="4">按季度</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left: -80px;">
                    <el-input-number v-if="updatePlan.shiftMethod == 1" v-model="newPlan.shiftCount" :min="1" :max="100"
                        controls-position="right" />
                </el-form-item>
            </div>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="updatePlan.remark" />
            </el-form-item>
        </el-form>

        <!-- 班次,班组 -->
        <el-tabs type="border-card">
            <el-tab-pane label="班次">
                <!-- 工具栏 -->
                <div>
                    <el-button title="新增班次" plain @click="this.shift.addShiftDialogVisible = true" type="primary">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-button>
                    <el-button title="编辑班次" @click="handlerShiftEdits" plain type="success">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                    </el-button>
                    <el-button @click="deleteShiftEdits" plain title="删除班次" type="danger">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </div>
                <el-table ref="shiftTable" :data="shift.shifts" style="width: 100%">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="序号" property="orderNum" align="center" width="110" />
                    <el-table-column label="班次名称" property="shiftName" align="center" width="110" />
                    <el-table-column label="开始日期" property="startTime" align="center" width="150" />
                    <el-table-column label="结束日期" property="endTime" align="center" width="150" />
                    <el-table-column label="备注" property="remark" align="center" width="110" />
                    <el-table-column width="150" align="center" label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="handleShiftEdit(scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="deleteShiftEdits(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="班组">
                <div class="card">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span style="line-height:32px">班组</span>
                                <el-button link @click="addTeamLink" type="primary" text>添加</el-button>
                            </div>
                        </template>
                        <el-table :data="team.addTeam">
                            <el-table-column label="班组编号" property="teamCode" align="center" width="125" />
                            <el-table-column label="班组名称" property="teamName" align="center" width="125" />
                            <el-table-column width="110" align="center" label="操作">
                                <template #default="scope">
                                    <el-button link text type="danger" @click="deleteTeamEdits(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span style="line-height:32px">用户</span>
                            </div>
                        </template>
                        <el-table :data="addUser">
                            <el-table-column label="用户名" property="userName" align="center" width="120" />
                            <el-table-column label="用户昵称" property="nickName" align="center" width="120" />
                            <el-table-column label="电话" property="tel" align="center" width="120" />
                        </el-table>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelUpdatePlan">取消</el-button>
                <el-button type="success" @click="this.planDialogVisible = true">完成</el-button>
                <el-button type="primary" @click="doUpdatePlan">提交</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 查看排班计划 -->
    <el-dialog v-model="selectPlanDialogVisible" title="添加排班计划" :destroy-on-close=true width="900" align-center
        @close="cancelUpdatePlan">
        <el-form label-width="100px" :model="updatePlan" style="max-width: 850px">
            <div class="addPlan">
                <span>*</span>
                <el-form-item label="计划编号" style="width: 335px; margin-right: 80px;">
                    <el-input v-model="updatePlan.planCode" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="计划名称" style="width: 420px;">
                    <el-input v-model="updatePlan.planName" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="开始日期" style="width: 270px;">
                    <el-date-picker v-model="updatePlan.startDate" value-format="YYYY-MM-DD" type="date" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="结束日期" style="width: 270px;">
                    <el-date-picker v-model="updatePlan.endDate" value-format="YYYY-MM-DD" type="date" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="班组类型" style="width: 270px;">
                    <el-select v-model="updatePlan.calendarType">
                        <el-option v-for="item in types" :key="item.teamTypeId" :label="item.teamTypeName"
                            :value="item.teamTypeName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="轮班方式">
                    <el-radio-group v-model="updatePlan.shiftType" class="ml-4">
                        <el-radio label="1">白班</el-radio>
                        <el-radio label="2">两班倒</el-radio>
                        <el-radio label="3">三班倒</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="倒班方式" style="width: 200px; margin-left: 70px;">
                    <el-select v-model="updatePlan.shiftMethod">
                        <el-option label="按天" value="1">按天</el-option>
                        <el-option label="按周" value="2">按周</el-option>
                        <el-option label="按月" value="3">按月</el-option>
                        <el-option label="按季度" value="4">按季度</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left: -80px;">
                    <el-input-number v-if="updatePlan.shiftMethod == 1" v-model="newPlan.shiftCount" :min="1" :max="100"
                        controls-position="right" />
                </el-form-item>
            </div>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="updatePlan.remark" />
            </el-form-item>
        </el-form>

        <!-- 班次,班组 -->
        <el-tabs type="border-card">
            <el-tab-pane label="班次">
                <el-table ref="shiftTable" :data="shift.shifts" style="width: 100%">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="序号" property="orderNum" align="center" width="110" />
                    <el-table-column label="班次名称" property="shiftName" align="center" width="110" />
                    <el-table-column label="开始日期" property="startTime" align="center" width="150" />
                    <el-table-column label="结束日期" property="endTime" align="center" width="150" />
                    <el-table-column label="备注" property="remark" align="center" width="110" />
                    <el-table-column width="150" align="center" label="操作">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="班组">
                <div class="card">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span style="line-height:32px">班组</span>
                            </div>
                        </template>
                        <el-table :data="team.addTeam">
                            <el-table-column label="班组编号" property="teamCode" align="center" width="125" />
                            <el-table-column label="班组名称" property="teamName" align="center" width="125" />
                        </el-table>
                    </el-card>

                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span style="line-height:32px">用户</span>
                            </div>
                        </template>
                        <el-table :data="addUser">
                            <el-table-column label="用户名" property="userName" align="center" width="120" />
                            <el-table-column label="用户昵称" property="nickName" align="center" width="120" />
                            <el-table-column label="电话" property="tel" align="center" width="120" />
                        </el-table>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>

    <!-- 确认计划提示框 -->
    <el-dialog v-model="planDialogVisible" title="确认" width="30%" align-center>
        <span style="font-size: 16px;">是否确认完成计划,完成后无法更改!!!</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="planDialogVisible = flase">取消</el-button>
                <el-button type="primary" @click="confirmPlan">确认</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加班次的弹窗 -->
    <el-dialog v-model="shift.addShiftDialogVisible" title="添加班次" :destroy-on-close=true width="900" align-center
        @close="cancelAddShift">
        <el-form label-width="100px" :model="shift.newShift" style="max-width: 850px">
            <div class="addPlan">
                <el-form-item label="序号" style="width: 425px; margin-left:5px">
                    <el-input-number v-model="shift.newShift.orderNum" :value="1" :min="1" :max="100" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="班次名称" style="width: 410px;">
                    <el-input v-model="shift.newShift.shiftName" placeholder="请输入计划名称" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="开始时间" style="width: 270px; margin-right:155px">
                    <el-time-picker v-model="shift.newShift.startTime" value-format="HH:mm:ss" placeholder="请选择开始时间" />
                </el-form-item>
                <span>*</span>
                <el-form-item label="结束时间" style="width: 270px;">
                    <el-time-picker v-model="shift.newShift.endTime" value-format="HH:mm:ss" placeholder="请选择结束时间" />
                </el-form-item>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelAddShift">取消</el-button>
                <el-button type="primary" @click="doAddShift">提交</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 班组数据 -->
    <el-dialog v-model="team.addTeamDialogVisible" title="班组选择" :destroy-on-close=true width="900" align-center
        @close="cancelAddTeam">
        <el-form style="margin-top: 15px;" :inline="true" :model="team.queryTeam" class="demo-form-inline">
            <el-form-item label="班组编号">
                <el-input v-model="team.queryTeam.teamCode" placeholder="班组编号" clearable />
            </el-form-item>
            <el-form-item label="班组名称">
                <el-input v-model="team.queryTeam.teamName" placeholder="班组名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadTeams">搜索</el-button>
                <el-button @click="resetTeamTing">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="teamTable" :row-key="(row) => row.teamId" :data="team.teams" style="width: 100%">
            <el-table-column :reserve-selection="true" type="selection" align="center" width="120" />
            <el-table-column label="班组编码" property="teamCode" align="center" />
            <el-table-column label="班组名称" property="teamName" align="center" />
            <el-table-column label="备注" property="remark" align="center" />
        </el-table>
        <!-- 分页栏 -->
        <el-pagination class="page" :page-size="team.limit" @current-change="changeTeamPage" background
            layout="prev, pager, next" :total="team.total" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelAddTeam">取消</el-button>
                <el-button type="primary" @click="doAddTeam">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import teamTypeRequest from '../../../api/cal-teamType.js';
import planRequest from '../../../api/cal-plan.js';
import shiftRequest from '../../../api/cal-shift.js';
import teamRequest from '../../../api/cal-team.js';
import teamShiftRequest from '../../../api/cal-teamShift.js';
import teamMemberRequest from '../../../api/cal-teamMember.js';

import { linkEmits } from 'element-plus';
export default {
    data() {
        return {
            //加载数据
            plans: [],//计划数据列表
            queryPlan: [],//多条件查询的数据列表
            types: [],//班组类型列表
            page: 1,// 分页的当前页码
            limit: 10,// 分页的每页大小
            total: 0,// 列表的总条数
            maxPageNum: 1,// 列表的最大页码
            //添加计划
            addPlanDialogVisible: false,
            newPlan: { orderNum: 1 },
            //编辑计划
            updatePlanDialogVisible: false,
            updatePlan: [],
            //班次相关
            shift: {
                shifts: [],//班次数据
                //添加班次
                addShiftDialogVisible: false,
                newShift: { orderNum: 1 },
            },
            //班组相关
            team: {
                teams: [],
                page: 1,// 分页的当前页码
                limit: 10,// 分页的每页大小
                total: 0,// 列表的总条数
                maxPageNum: 1,// 列表的最大页码
                addTeamDialogVisible: false,
                queryTeam: {},
                addTeam: [],//添加的班组
            },
            //用户
            addUser: [],
            planDialogVisible: false,//确认框
            selectPlanDialogVisible: false,//查看排班信息
        }
    }, methods: {
        /**
         * 删除计划
         */
        deletePlanEdits(row) {
            let planIds = [];
            let table = this.$refs.planTable.getSelectionRows();
            //批量删除
            if (row.planId == undefined || row.planId == "") {
                if (table == undefined || table.length == 0) {
                    this.$message({
                        type: "info",
                        message: "请选择至少一行"
                    });
                }
                table.forEach(table => {
                    planIds.push(table.planId)
                });
                planRequest.deletes(planIds, res => {
                    if (res.code != 0) {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        this.loadPlans();
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error',
                        });
                    }
                });
            } else {
                //单行删除
                planIds.push(row.planId);
                planRequest.deletes(planIds, res => {
                    if (res.code != 0) {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        this.loadPlans();
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error',
                        });
                    }
                })
            }
        },

        /**
         * 确认计划
         */
        confirmPlan() {
            this.updatePlan.status = 2;
            planRequest.update(this.updatePlan, res => {
                if (res.code == '1') {
                    this.$message({
                        message: '确认成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.updatePlanDialogVisible = false;
                    this.planDialogVisible = false;
                    this.updatePlan = [];
                    this.loadPlans();
                } else {
                    this.$message({
                        message: '确认失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 提交修改
         */
        doUpdatePlan() {
            planRequest.update(this.updatePlan, res => {
                if (res.code == '1') {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.updatePlanDialogVisible = false;
                    this.updatePlan = [];
                    this.loadPlans();
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error',
                    });
                }
            })
        },
        /**
         * 取消修改
         */
        cancelUpdatePlan() {
            this.updatePlanDialogVisible = false;
            this.updatePlan = [];
        },
        /**
         * 查询用户信息
         */
        loadAddUser() {
            this.team.addTeam.forEach(team => {
                teamMemberRequest.list(team.teamCode, res => {
                    res.data.forEach(user => {
                        this.addUser.push(user);
                    });
                })
            });
        },
        /**
         * 删除添加的班组
         */
        deleteTeamEdits(row) {
            // recordId
            teamShiftRequest.delete(row.recordId, res => {
                if (res.code == '1') {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.loadAddTeam();
                }
            })
        },
        /**
         * 添加班组
         */
        doAddTeam() {
            let table = this.$refs.teamTable.getSelectionRows();
            let shiftId = "";
            if (this.shift.shifts.length == 0) {
                this.$message({
                    message: '请先添加班次',
                    type: 'error'
                });
                return;
            }
            this.shift.shifts.forEach(shift => {
                shiftId += shift.shiftId
            });
            teamShiftRequest.save(this.updatePlan.startDate, table, shiftId, this.updatePlan.planId, this.updatePlan.shiftType, res => {
                if (res.code > '0') {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.team.addTeamDialogVisible = false;
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error',
                    });
                }
            })
        },
        /**
         * 取消班组
         */
        cancelAddTeam() {

        },
        /**
         *获取班组数据
         */
        loadTeams() {
            teamRequest.list(this.team.page, this.team.limit, this.team.queryTeam, data => {
                this.team.teams = data.data.list;
                this.team.total = data.data.total;
                this.team.maxPageNum = data.data.pages;
            });
        },
        /**
         * 重置
         */
        resetTeamTing() {
            this.team.queryTeam = {};
        },
        /**
         *更新分页
         */
        changeTeamPage(currPage) {//更新分页
            this.team.page = currPage;
            this.loadTeams();
        },
        /**
         * 班组选择
         */
        addTeamLink() {
            this.team.queryTeam = { teamTypeId: this.updatePlan.calendarType };
            this.team.addTeamDialogVisible = true;
            this.loadTeams();
        },
        /**
         * 删除班次信息
         */
        deleteShiftEdits(row) {
            let shiftIds = [];
            let table = this.$refs.shiftTable.getSelectionRows();
            //批量删除
            if (row.shiftId == undefined || row.shiftId == "") {
                if (table == undefined || table.length == 0) {
                    this.$message({
                        type: "info",
                        message: "请选择至少一行"
                    });
                }
                table.forEach(table => {
                    shiftIds.push(table.shiftId)
                });
                shiftRequest.deletes(shiftIds, res => {
                    if (res.code != 0) {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        shiftRequest.list(this.shift.newShift.planId, res => {
                            this.shift.shifts = res.data;
                        });
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error',
                        });
                    }
                });
            } else {
                //单行删除
                shiftIds.push(row.shiftId);
                shiftRequest.deletes(shiftIds, res => {
                    if (res.code != 0) {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        shiftRequest.list(this.shift.newShift.planId, res => {
                            this.shift.shifts = res.data;
                        });
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error',
                        });
                    }
                })
            }
        },
        /**
         * 批量编辑,只编辑第一个用户
         */
        handlerShiftEdits() {
            let one = this.$refs.shiftTable.getSelectionRows();
            shiftRequest.get(one[0].shiftId, res => {
                this.shift.newShift = one[0];
                this.shift.addShiftDialogVisible = true;
            })
        },
        /**
         * 编辑班次
         */
        handleShiftEdit(row) {
            shiftRequest.get(row.shiftId, res => {
                this.shift.newShift = res.data;
                this.shift.addShiftDialogVisible = true;
            })
        },
        /**
         * 添加/修改班次
         */
        doAddShift() {
            if (this.shift.newShift.shiftName == null || this.shift.newShift.startTime == null || this.shift.newShift.endTime == null) {
                this.$message({
                    message: '请输入必填项',
                    type: 'warning',
                });
                return;
            }
            if (this.shift.newShift.createTime != undefined) {
                // 修改班次
                shiftRequest.update(this.shift.newShift, res => {
                    if (res.code == '1') {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        //关闭窗体
                        this.shift.addShiftDialogVisible = false;
                        // 重新加载数据
                        this.handlePlanEdit(this.shift.newShift)
                    } else {
                        this.$message({
                            message: '修改失败',
                            type: 'error',
                        });
                    }
                });
            } else {
                if (this.shift.shifts.length >= this.updatePlan.shiftType) {
                    if (this.updatePlan.shiftType == 1) {
                        this.$message({
                            message: '轮班方式为白班时,至多有一个班次',
                            type: 'warning',
                        });
                    } else if (this.updatePlan.shiftType == 2) {
                        this.$message({
                            message: '轮班方式为两班倒时,至多有两个个班次',
                            type: 'warning',
                        });
                    } else {
                        this.$message({
                            message: '轮班方式为三班倒时,至多有三个班次',
                            type: 'warning',
                        });
                    }
                    this.shift.addShiftDialogVisible = false;
                    return;
                }
                //添加班次
                shiftRequest.save(this.shift.newShift, res => {
                    if (res.code == '1') {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        //关闭窗体
                        this.shift.addShiftDialogVisible = false;
                        // 重新加载数据
                        this.handlePlanEdit(this.shift.newShift)
                    } else {
                        this.$message({
                            message: '添加失败',
                            type: 'error',
                        });
                    }
                });
            }
        },
        /**
         * 取消添加/修改
         */
        cancelAddShift() {
            this.shift.addShiftDialogVisible = false;
            this.shift.newShift = { orderNum: 1, planId: this.shift.newShift.planId };
        },
        /**
         * 修改信息 
         */
        handlePlanEdit(row) {
            this.updatePlanDialogVisible = true;
            planRequest.selectByPlanId(row.planId, res => {
                this.updatePlan = res.data;
                this.loadAddTeam();
            });
            this.shift.newShift.planId = row.planId;
            shiftRequest.list(row.planId, res => {
                this.shift.shifts = res.data;
            })
        },
        /**
         * 查询已添加的班组
         */
        loadAddTeam() {
            teamShiftRequest.list(this.updatePlan.planId, res => {
                this.team.addTeam = res.data;
                this.loadAddUser();
            })
        },
        /**
         * 查看排班详情
         */
        linkEmits(row) {
            this.selectPlanDialogVisible = true;
            planRequest.selectByPlanId(row.planId, res => {
                this.updatePlan = res.data;
                this.loadAddTeam();
            });
            this.shift.newShift.planId = row.planId;
            shiftRequest.list(row.planId, res => {
                this.shift.shifts = res.data;
            })
        },
        /**
        * 添加排版计划
        */
        doAddPlan() {
            if (this.newPlan.planCode == null || this.newPlan.planName == null || this.newPlan.startDate == null
                || this.newPlan.endDate == null || this.newPlan.calendarType == null) {
                this.$message({
                    message: '请输入必填项',
                    type: 'warning',
                });
                return;
            }
            console.log(this.newPlan);
            planRequest.save(this.newPlan, res => {
                console.log(res);
                if (res.code == '1') {
                    this.$message({
                        message: '添加班组成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.addPlanDialogVisible = false;
                    // 重新加载数据
                    this.loadPlans();
                    // 将newUser制空
                    this.newPlan = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '班组名称重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 取消添加
         */
        cancelAddPlan() {
            this.addPlanDialogVisible = false;
            // 将newUser制空
            this.newPlan = {};
            //取消所有选中行
            this.loadPlans();
        },
        /**
         * 获取列表数据
         */
        loadPlans() {
            planRequest.list(this.page, this.limit, this.queryPlan, data => {
                this.plans = data.data.list;
                this.total = data.data.total;
                this.maxPageNum = data.data.pages;
            });
        },
        /**
         * 更新分页
         */
        changePage(currPage) {
            this.page = currPage;
            this.loadPlans();
        },
        /**
         * 获取班组类型
         */
        loadTeamTypes() {
            teamTypeRequest.list(data => {
                this.types = data.data.data;
            });
        },
        /**
         * 重置按钮
         */
        resetTing() {
            this.queryPlan = {};
            this.loadPlans();
        }
    }, mounted() {
        this.loadPlans();//计划数据
        this.loadTeamTypes();//班组类型

    }
}

</script>


<style scoped>
.page {
    margin-top: 10px;
    justify-content: center;
}

.headDivider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    background-color: #dcdfe6;
    position: relative;
}

.addPlan {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.addPlan .el-form-item {
    margin-bottom: 30px;
}

.addPlan span {
    color: #ff4949;
    line-height: 35px;
    position: relative;
    right: -25px;
}

.card {
    display: flex;
    justify-content: flex-start;
}

.card-header {
    display: flex;
    justify-content: space-between;
}

.box-card {
    width: 420px;
    margin: 5px;
}
</style>